<template>
  <div ref="barChart" class="group-bar-chart"></div>
</template>
<script lang="ts">
export default {
  name: 'GroupBarChart'
};
</script>
<script lang="ts" setup>
import { ref, onMounted, defineProps, computed, watch } from 'vue';
import { useECharts } from '@/hooks/useECharts';
import { store } from '@/store';
import type { BarDataType } from './types';

interface GroupBarChartProps {
  barData: BarDataType;
}
const props = defineProps<GroupBarChartProps>();

const barChart = ref();
const { setOptions } = useECharts(barChart);
const isShowChartLine = computed(() => {
  return store.state.app.globalConfig.isShowChartLine;
});

const legendArr = computed(() => {
  return props.barData.orgGhgSourceStaticList.map(item => {
    return {
      name: item.name,
      textStyle: {
        color: '#435970'
      }
    };
  });
});
const seriesArr = computed(() => {
  return props.barData.orgGhgSourceStaticList.map(item => {
    return {
      name: item.name,
      type: 'bar',
      stack: 'Ad',
      // barMaxWidth: 28,
      barWidth: 28,
      emphasis: {
        focus: 'none'
      },
      label: {
        show: false
      },
      itemStyle: {
        borderRadius: 2,
        width: 28
      },
      data: item.data
    };
  });
});

// 年碳排放趋势 Echart
const renderPieEchart = () => {
  let option: any = {
    color: [
      '#35BD9B',
      '#2B9496',
      '#7CA6AC',
      '#E7EDED',
      '#B4D9E9',
      '#6FB1CB',
      '#CDCDE6',
      '#8888BD',
      '#C1D0A7',
      '#E4D9AB'
    ],
    tooltip: {
      // 是否将 tooltip 框限制在图表的区域内。当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
      // confine: true,
      appendToBody: true,
      formatter: (params: any) => {
        var res = '';
        for (var i = params.length - 1; i >= 0; i--) {
          // if (params[i].data.totalEmission)
          res += `<p style="line-height:30px;">${params[i].marker}${params[i].seriesName}：${params[i].data.totalEmission} &nbsp<span style="font-size:12px;color: #7a8a99;">(${params[i].value}%)</span></p>`;
        }
        return `<p style="line-height:30px;font-weight:700";color: #0a1f33>${params[0].name}</p>${res}`;
      },
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      type: 'scroll',
      itemGap: 20,
      bottom: 16,
      padding: [5, 32],
      pageIcons: {
        horizontal: [
          'image://',
          'image://'
        ]
      },
      pageIconColor: '#435970', //图例分页左右箭头图标颜色
      data: legendArr.value
    },
    grid: {
      top: 25,
      left: 20,
      right: 20,
      bottom: 45,
      containLabel: true
    },
    xAxis: [
      {
        axisTick: { show: false },
        axisLine: { show: false },
        type: 'category',
        data: props.barData.organizationName,
        axisLabel: {
          formatter: function (params: string) {
            const len = props.barData.organizationName?.length || 0;
            console.log('formatter', len);
            const lineCount = len > 10 ? 2 : len > 7 ? 3 : 4;
            if (params.length <= lineCount) return params;
            if (params.length <= lineCount * 2)
              return params.slice(0, lineCount) + '\n' + params.slice(lineCount);
            return (
              params.slice(0, lineCount) + '\n' + params.slice(lineCount, lineCount * 2 - 1) + '...'
            );
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitNumber: 5, // 设置分几段显示
        label: {
          show: false
        },
        splitLine: {
          show: isShowChartLine.value ?? true
        },
        axisLabel: {
          // 隐藏标签
          show: false
        }
      }
    ],
    series: seriesArr
  };
  return option;
};
function renderChart() {
  const option = renderPieEchart();
  setOptions(option);
}

onMounted(() => {
  renderChart();
});
watch(
  () => props.barData,
  val => {
    if (val && barChart.value) {
      renderChart();
    }
  }
);
</script>
<style lang="scss" scoped>
.group-bar-chart {
  width: 100%;
  height: calc(100% - 70px);
}
</style>
